<template>
  <div class="wrapper">
      <van-nav-bar fixed title="商品编辑" left-arrow @click-left="$utils.back($route.path);"></van-nav-bar>
      <div class="has-top">
        <div class="container">
		<div class="list" v-for="(item,index) in datas.ProductSkuList" :key="index">
			<div class="top flex-between">
				<div class="top_left">
					<div>{{item.V_DisplayAttribute}}</div>
					<div class="number">货号：{{item.Sku}}</div>
				</div>
                <div v-if="datas.ProductSkuList.length > 1">
                    <div class="status" @click="item.IsLock = 1" v-if="item.IsLock==0">禁用</div>
				    <div class="status stetusNo" @click="item.IsLock = 0" v-if="item.IsLock==1">启用</div>
                </div>
			</div>
			<div class="body">
				<div class="flex-start">
					<div class="title">价格（元）</div>
					<div><input type="number" v-model="item.SalePrice" placeholder="请输入商品售价" placeholder-class="placeColor"></div>
				</div>
                <div class="flex-start">
					<div class="title">PV值</div>
					<div><input type="number" v-model="item.Pv" placeholder="请输入PV值" placeholder-class="placeColor"></div>
				</div>
				<div class="flex-start">
					<div class="title">库存</div>
					<div><input type="number" v-model="item.Stock" placeholder="请输入库存" placeholder-class="placeColor"></div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="btn btn-success-hollow" @click="submit">保存</div>
		</div>
	</div>
      </div>
  </div>
</template>

<script>
  import imgBox from 'components/imgBox'
  import {
        SaveSupplierStoreProduct,
        GetProductAllInfo
    } from 'api/product'
  export default {
      components: {
          imgBox
      },
      data() {
          return {
            datas:{}
          }
      },
      created() {
            // 商品IDthis.Status = this.$route.params.Status
            this.productId = this.$route.params.id
            this.GetProductAllInfo()
        },
      mounted() {

      },
      methods: {
        GetProductAllInfo() {
            let path = '?productId='+this.productId
            GetProductAllInfo(path).then((res) => {
                    if (res.State==1) {
                        this.datas = res.Data
                    }
                })
            },
            submit(){
                let verify = true;
				this.datas.ProductSkuList.forEach((e,i)=>{
						if(e.SalePrice == '' || parseInt(e.SalePrice) <= 0){
							 this.$toast('请输入正确的售价');
							 return verify = false
						}
                        if(e.Stock == '' || parseInt(e.Stock) < 0){
							 this.$toast('请输入正确的库存数');
							 return verify = false
						}
                        if(e.Pv == '' || parseInt(e.Pv) < 0){
							 this.$toast('请输入正确的Pv值');
							 return verify = false
						}
                        
				})
				if(!verify){
					return
				}
                let path = '?typeId=0&IsUpdateProductAttribute=0&storeId=-1'
                SaveSupplierStoreProduct(path,this.datas).then((res) => {
                    if (res.State==1) {
                        this.$toast('保存成功');
						setTimeout(e=>{
							this.$utils.back()
						},1000)
                    }
                })
                
            },
          
      }
  }
</script>

<style lang="scss" scoped>
.container{
		padding: 24px 0 130px 0;
	}
	.list{
		padding: 24px;
		background: #FFFFFF;
		margin-bottom: 24px;
	}
	.top{
		font-size: 32px;
		color: #333;
		padding:0 16px 16px 16px;
	}
	.number{
		font-size: 26px;
		color: #999;
	}
	.top_left{
		display: flex;
		flex-direction: column;
		
		div{
			padding: 7px 0;
		}
	}
	.body{
		background: #F4F5F6;
		padding:0 24px;
		margin-bottom: 16px;
		&>div{
			font-size: 26px;
			height: 116px;
			color: #333333;
		}
		input{
			width: 292px;
			height: 68px;
			background: #FFFFFF;
			border-radius: 4px;
			font-size: 32px;
			text-indent: 20px;
            @include color-primary();
			// font-weight: bold;
		}
		.title{
			width: 200px;
			padding-bottom: 16px;
		}
	}
	.placeColor{
		font-size: 28px;
		color: #999;
		font-weight: normal;
	}
	.btn {
		margin: 16px 30px 0 30px;
		width: 690px;
		height: 80px;
		border-radius: 40px;
		font-size: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
		color: #FFFFFF;
	}
    .footer {
	width: 750px;
	height: 120px;
	background: #FFFFFF;
	box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
	position: fixed;
	left: 0;
	bottom: 0;
}
.btn-success-hollow {
    @include color-primary();
    border:1px solid;
    @include border-primary();
}
.flex-start{
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flex-between{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.status{
    font-size: 24px;
    border:1px solid #999;
    padding: 5px 20px;
    border-radius: 20px;
    color: #999;
}
.stetusNo{
    @include border-primary(); 
    @include color-primary();
}
</style>
